<!--回复：评分/处罚/取消操作-->
<script setup>
import {ReputationLogType} from "@ginstone/nga-api/dist/src/enums/ReputationLogType";
import {toRefs} from "vue";

const props = defineProps({
  data: {type: Array},
})

const {data} = toRefs(props)
</script>

<template>
  <div>
    <h5>改动</h5>
    <template v-for="{type,money,reputation,prestige,reason,days,forumId,remark} in data">
      <!--加分/扣分-->
      <el-tag v-if="type===ReputationLogType.reward" :type="reputation<0?'danger':'success'">
        <span class="text-span">评分</span>
        <span class="text-span">{{ reputation }} 声望  {{ prestige }} 威望 {{ money }}G</span>
        <span>{{ reason }}</span>
      </el-tag>
      <!--处罚-->
      <el-tag v-if="type===ReputationLogType.punishment" type="danger">
        <span v-if="forumId" class="text-span">在版面中</span>
        <span class="text-span">禁言 {{ days }} 天</span>
        <span class="text-span">{{ reputation }} 声望  {{ prestige }} 威望 {{ money }}G</span>
        <span>{{ reason }}</span>
      </el-tag>
      <!--取消操作-->
      <el-tag v-if="type===ReputationLogType.canceled" type="warning">
        <span v-if="remark==='UB105'" class="text-span">取消禁言</span>
        <span v-else class="text-span">取消操作</span>
        <span>{{ reputation }} 声望  {{ prestige }} 威望 {{ money }}G</span>
      </el-tag>
    </template>
  </div>
</template>

<style scoped>
h5 {
  margin-top: 15px;
  margin-bottom: 15px;
}

.text-span {
  margin-right: 3px;
}
</style>